<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #e9ecef;
      margin: 0;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #343a40;
    }
    .container {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ced4da;
      border-radius: 5px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #0056b3;
    }
    #weatherInfo {
      margin-top: 20px;
      padding: 10px;
      background-color: #f8f9fa;
      border-radius: 5px;
      border: 1px solid #ced4da;
    }
  </style>
</head>
<body>
<h1>查询天气</h1>
<div class="container">
  <input type="text" id="cityInput" placeholder="输入城市名称">
  <button id="getWeatherBtn">查询天气</button>
  <div id="weatherInfo"></div>
</div>

<script>
  document.getElementById("getWeatherBtn").addEventListener("click", function() {
    var city = document.getElementById("cityInput").value;
    var apiUrl = "http://127.0.0.1:8084/api/weather/getWeather?city=" + encodeURIComponent(city);

    fetch(apiUrl)
            .then(response => {
              if (!response.ok) {
                throw new Error("Network response was not ok " + response.statusText);
              }
              return response.json(); // 确保返回JSON格式
            })
            .then(data => {
              // 过滤掉包含 .gif 的项
              var filteredData = data.filter(item => !item.includes('.gif'));

              // 如果没有有效数据，显示提示信息
              if (filteredData.length === 0) {
                document.getElementById("weatherInfo").innerHTML = "没有可用的天气数据。";
              } else {
                var weatherInfo = filteredData.join("<br>"); // 假设返回的是一个字符串数组
                document.getElementById("weatherInfo").innerHTML = weatherInfo;
              }
            })
            .catch(error => {
              document.getElementById("weatherInfo").innerHTML = "无法获取天气数据。";
              console.error("There was a problem with the fetch operation:", error);
            });
  });
</script>
</body>
</html>
